🎯 What's this PR about?

This PR introduces a completely refactored Block Editor built on top of TipTap v3 with a modern Angular standalone architecture. The goal: make the editor faster, easier to maintain, and easier to extend — while keeping the existing user experience and content format intact.

Videos

✨ Features

Everything users love about the Block Editor — now rebuilt with a cleaner foundation:

• 📝 Rich text editing — bold, italic, underline, strikethrough, headings, lists, code, blockquote
• ⚡ Slash menu (/) — quickly insert blocks, content types, and contentlets without leaving the keyboard
• 🎨 Floating toolbar — context-aware formatting that follows the selection
• 🔗 Link, image, video & table popovers — anchored to the caret, keyboard friendly
• 🤖 AI integration — Ask AI for content + AI-generated images (centered modals)
• 😀 Emoji picker powered by emoji-mart
• 📦 Drag handle gutter — reorder blocks visually
• 📤 Drag-and-drop uploads — images and videos with inline upload placeholders
• 🧩 dotCMS contentlet blocks — embed and edit contentlets directly inside the editor
• 🎯 Allowed blocks / content types — restrict what authors can insert per field

🚦 Rollout & rollback safety — feature flag

The new editor ships behind a feature flag so existing customer instances cannot be broken by an unexpected regression. Both editors are bundled together for this transition window; the JSP that renders the field picks which custom element to mount based on the flag.

• Flag name: FEATURE_FLAG_NEW_BLOCK_EDITOR (follows the standard FEATURE_FLAG_* prefix convention)
• Default value: false → the legacy editor renders for every customer until they explicitly opt in
• Where it lives:
  • dotmarketing-config.properties — default false
  • FeatureFlagName.java — Java constant
  • ConfigurationResource.java — exposed to the frontend via the config endpoint whitelist
  • FeaturedFlags enum in @dotcms/dotcms-models — referenced by the three Angular consumers (dot-edit-content-block-editor, dot-block-editor-sidebar, dot-content-compare-block-editor)
  • edit_field.jsp — ConfigUtils.isFeatureFlagOn("FEATURE_FLAG_NEW_BLOCK_EDITOR") selects between <dotcms-block-editor> (new) and <dotcms-old-block-editor> (legacy)
• How to enable per instance: flip FEATURE_FLAG_NEW_BLOCK_EDITOR=true in the dotCMS config or set it via the admin properties UI. No restart required.
• Cleanup runbook: core-web/libs/new-block-editor/CLEANUP_FEATURE_FLAG.md — step-by-step instructions for removing the flag, deleting the legacy lib, renaming new-block-editor → block-editor, and dropping tippy.js once QA signs off.

The legacy libs/block-editor/ is intentionally kept on this branch as the rollback target. It will be deleted in a follow-up PR once the new editor exits QA.

🔄 Backwards compatibility

No data migration required. Existing block-editor content keeps working as-is.

• ✅ Same JSON content format — the editor reads/writes the same TipTap document shape that the legacy editor produced. Any content already saved in your database will load and render correctly.
• ✅ Same field configuration — allowedBlocks and allowedContentTypes field variables behave exactly like before.
• ✅ Drop-in replacement at the field level — the <dotcms-block-editor> web component keeps the same inputs/outputs/JSON shape. The field-rendering JSP picks between <dotcms-block-editor> (new) and <dotcms-old-block-editor> (legacy) based on the feature flag, so the customer-facing field stays the same regardless of which editor renders.
• 🔁 Portlet integration shim — Edit Content (dot-edit-content-block-editor), EMA (dot-block-editor-sidebar), and Content Compare (dot-content-compare-block-editor) each gained a small flag-driven @if/@else that mounts the new or legacy editor. Public inputs/outputs of those portlet components are unchanged. The shim is removed by the cleanup runbook once QA signs off.

🛠 Changes

Apps

• apps/dotcms-block-editor — migrated from NgModule bootstrap to Angular standalone (bootstrapApplication). Registers the new <dotcms-block-editor> custom element from @dotcms/new-block-editor, and also registers the legacy <dotcms-old-block-editor> custom element (from the preserved @dotcms/block-editor lib) so the field-rendering JSP can swap between the two via the feature flag. The legacy registration block is removed by the cleanup runbook once QA signs off.

Libraries

• libs/new-block-editor — brand new library that hosts the refactored editor, its extensions, services, and UI.
• libs/block-editor — kept on this branch as the rollback target. No new feature work goes here; it's marked @deprecated and slated for deletion in the cleanup PR.

Dependencies

• ⬆️ TipTap v3 + ngx-tiptap upgraded to latest majors
• ➕ Floating UI for popover positioning
• ➕ emoji-mart for the emoji picker
• ➕ lowlight + @tiptap/extension-code-block-lowlight for code-block syntax highlighting (paired with a custom Angular node view that renders a PrimeNG language picker)

Styling

• New Tailwind layers + typography plugin tuned for the editor surface
• TipTap, table, link, and upload-placeholder styles consolidated in styles.css
• Added Material Symbols font for editor icons
• Removed an unused shared SCSS code block

Reuses existing data-access services

The new editor does not duplicate HTTP plumbing. It consumes services already in @dotcms/data-access:

• DotContentTypeService, DotContentSearchService — slash menu content pickers
• DotAiService — AI content & image generation
• DotUploadFileService — temp upload + workflow PUBLISH
• DotLanguagesService, DotMessageService — language metadata & i18n

Editor-specific concerns (state, popovers, modals, slash menu orchestration, contentlet-edit URL caching) live as small local services inside the lib.

🏗 New project structure

libs/new-block-editor/
└── src/lib/editor/
    ├── editor.component.ts             # Top-level <dotcms-block-editor> shell
    ├── editor.utils.ts                 # Shared helpers
    ├── config.utils.ts                 # Editor config builder
    │
    ├── components/                     # UI pieces
    │   ├── toolbar/                    # Floating formatting toolbar
    │   ├── slash-menu/                 # "/" command menu (catalog + service + UI)
    │   ├── editor-popover.component    # Anchored popover shell
    │   ├── link-popover.component
    │   ├── image-popover.component
    │   ├── table-popover.component
    │   ├── ai-content-dialog           # Centered AI modal
    │   └── emoji-picker.component
    │
    ├── extensions/                     # TipTap extensions
    │   ├── nodes/                      # Custom nodes
    │   │   ├── contentlet/             # dotCMS contentlet block
    │   │   ├── image.extension.ts
    │   │   ├── video.extension.ts
    │   │   ├── ai-content.extension.ts
    │   │   ├── grid.extension.ts
    │   │   └── upload-placeholder.extension.ts
    │   ├── link.extension.ts
    │   ├── slash-command.extension.ts
    │   ├── block-gutter.extension.ts   # Drag-handle gutter
    │   └── selection-preserve.extension.ts
    │
    ├── services/                       # Editor-only services
    │   ├── editor-popover.service.ts   # Popover open/close state
    │   ├── editor-modal.service.ts     # Centered modal orchestration
    │   ├── dot-upload.service.ts       # Async adapter over DotUploadFileService
    │   └── contentlet-edit-url.service.ts
    │
    ├── store/                          # NgRx Signals store
    │   ├── editor.store.ts             # Language, allowed blocks, AI status
    │   └── editor-block-types.ts
    │
    └── utils/                          # Stateless helpers
        ├── markdown.utils.ts
        ├── breadcrumb.utils.ts
        └── remote-extensions.loader.ts

Architectural rule of thumb:

🟦 Local services — state & orchestration stay in the lib
🟩 Data-access services — HTTP & persistence live in @dotcms/data-access

🧪 How to verify

1. Open any content type with a Block Editor field → start typing.
2. Type / → confirm the slash menu opens, lists allowed blocks, and the content-type sub-picker loads contentlets.
3. Try the floating toolbar with no selection (click Bold on an empty line) — the active state should reflect immediately.
4. Drag-and-drop an image and a video onto the editor → both should upload and insert.
5. Open Ask AI and AI Image from the slash menu → both modals should generate and insert content.
6. Click an inserted contentlet block → the Edit Contentlet action should resolve via the cached URL.
7. Open an existing piece of block-editor content saved with the old editor → it should load unchanged.
8. Flip FEATURE_FLAG_NEW_BLOCK_EDITOR=true and reload — the new <dotcms-block-editor> element should mount instead of <dotcms-old-block-editor>. Toggle back to false and confirm the legacy editor renders again with the same content intact.